<template>
  <div style="margin-top: 20px" :class="`form-item col-${config.col || 1}`">
    <div style="display: flex">
      <span class="config-title" v-show="config.showBy ? rootConfig[config.showBy].value: true"> {{ config.title }} </span>
      <a-tooltip v-if="config.tips">
        <template slot="title">
          Tips: {{config.tips}}
        </template>
        <a-icon type="alert" style="color: #ff9b19;font-size: 18px;"/>
      </a-tooltip>
    </div>
    <div class="item_class">
      <div class="icon-box">
        <a-radio-group v-model="value.isIcon">
          <a-radio value="1">
            图标
          </a-radio>
          <a-radio value="2" v-if="fun.getKey('page_sort') != 3">
            自定义
          </a-radio>
          <!--<a-radio value="3" v-if="fun.getKey('page_sort') != 3">-->
            <!--无-->
          <!--</a-radio>-->
        </a-radio-group>
      </div>
      <template v-if="value.isIcon=='1'">
        <div class="show-img" style="text-align: center;" v-if="value.icon" @click="openIconUpload()">
          <img v-if="fun.getKey('page_sort') == 3" :src="value.icon" alt="" />
          <i v-if="fun.getKey('page_sort') != 3" style="font-size: 30px" class="iconfont" :class="value.icon"></i>
          <a-icon class="icon-close11" type="close-circle" @click.stop="deleteIcon(value)" title="点击清除图片"/>
        </div>
        <div class="choose-img" v-else @click="openIconUpload()">
          <i class="iconfont icon-jiahao"></i>
          <span>选择图标</span>
        </div>
      </template>
      <template v-if="value.isIcon=='2'">
        <image-picker v-model="value.image" ref="imagePicker"
                      :config="config" :show_title="false"
                      :rootConfig.sync="config"></image-picker>
      </template>
    </div>

    <icon-modal :ref="`iconModal`"
                :value.sync="value.icon"
                :config="config"
                :rootConfig="config"
                @confirm="handleIconOk(value,$event)"></icon-modal>
  </div>
</template>

<script>
	import iconModal from '../../../../system-components/icon-modal/index.vue';
	import imagePicker from './unit-image.vue';
	export default {
		props: ['value', 'config'],
    data() {
			return {
      }
    },
		computed: {
			choose_value: {
				get () {
					return this.value;
				},
				set (newValue) {
					this.$emit('input', newValue);
				}
			}
		},
    components: {
	    imagePicker,
	    iconModal
    },

		methods: {
			deleteIcon(item) {
				item.icon = "";
			},
			openIconUpload() {
				this.$refs[`iconModal`].show();
			},
			handleIconOk(item,event) {
				if(event.icon_color) {
					let icon = event.icon_value;
					let host = this.fun.getSiteRoot();
					if(this.fun.getSiteRoot() == "http://localhost:3001") {
						// 方便调试
						host = 'https://dev2.yunzmall.com/addons/yun_shop';
					}
					let url = this.fun.IsOldOne() ? host+'/addons/yun_shop/plugins/decorate/assets/cps_icon' : host+'/plugins/decorate/assets/cps_icon';
					if(icon.type === 'normal') {
						item.icon = `${url}/${icon.type}/icon_tabbar_${icon.name}_select.png`;
						item.default_icon = `${url}/${icon.type}/icon_tabbar_${icon.name}.png`
					}else {
						item.icon = `${url}/${icon.type}/icon_${icon.name}_${icon.type}_${event.icon_color}.png`;
						item.default_icon = `${url}/${icon.type}/icon_${icon.name}_${icon.type}.png`
					}
					console.log(item)
				}else {
					item.icon = event.icon;
				}
			},
		}
	};
</script>

<style lang="less" scoped>
  .icon-checkbox {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 120px;
    .choose {
      background-color: rgba(41, 186, 156, 0.16);
      border: solid 1px #29ba9c;
      color: #29ba9c;
    }
  }
  .icon-item {
    border: solid 1px #cccccc;
    padding: 2px 15px;
    cursor: pointer;
    i {
      font-size: 18px;
      color: #999999;
    }
  }
  .icon-item:first-child {
    border-radius: 4px 0 0 4px;
  }
  .icon-item:last-child {
    border-radius: 0 4px 4px 0;
  }

  .choose-img {
    margin: 15px auto;
    width: 100px;
    height: 100px;
    border-radius: 3px;
    border: dashed 1px #e2e2e2;
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: center;
    text-align: center;
    color: #5e5e5e;
    cursor: pointer;
    font-size: 12px;
    i {
      height: 28px;
    }
  }

  .choose-img:hover, .show-img:hover {
    color: #29ba9c;
    border-color: #29ba9c;
  }

  .show-img {
    position: relative;
    width: 100px;
    margin: 15px auto;
    border: dashed 1px #e2e2e2;
    cursor: pointer;
    img {
      width: 100%;
    }
    .icon-close11 {
      position: absolute;
      top: -10px;
      right: -9px;
      color: #999;
      font-size: 18px;
    }
  }
</style>
